<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-4 计算属性,方法与侦听器</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        {{firstName + lastName}}
        <hr />
        <!-- {{fullName}} -->
        {{age}}
        <hr />
        <!-- {{allName()}} -->

        {{myName}}
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: "yu",
                lastName: "kai",
                age: 18,
                myName: 'yk'
            },

            // 侦听器
            watch: {
                firstName() {
                    console.log("侦听器firstName");
                    this.myName = this.firstName + "" + this.lastName;
                },
                lastName() {
                    console.log("侦听器lastName");
                    this.myName = this.firstName + "" + this.lastName;
                }
            }

            // 计算属性
            // computed: {
            //     fullName() {
            //         console.log("computed 计算了一次")
            //         return this.firstName + " " + this.lastName;
            //     }
            // },

            // 方法
            // methods: {
            //     allName() {
            //         console.log("methods 方法");
            //         return this.firstName + " " + this.lastName;
            //     }
            // },
        })

    </script>
</body>

</html>